

<div class="hero">
    <div class="main-box">
        <div class="form-box">
            <div class="lang-switcher">
                <a href="#" onclick="setLanguage('zh')">中文</a> | 
                <a href="#" onclick="setLanguage('en')">English</a>
            </div>
            <div id="after"></div>
            <div class="button-box">
                <div id="btn"></div>
                <button id="log" type="button" class="toggle-btn" onclick="login()" data-i18n="loginBtn">Log in</button>
                <button id="reg" type="button" class="toggle-btn" onclick="register()" data-i18n="registerBtn">Register</button>
            </div>
            <div class="logo-container">
                <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
            </div>
            
            <div class="forms-wrapper">
                <form id="login" class="input-group">
                    <input type="text" class="input-field" placeholder="User" name="username" required data-i18n-placeholder="userPlaceholder">
                    <input id="login-password" type="password" class="input-field" placeholder="Password" name="password" required data-i18n-placeholder="login_passwordPlaceholder">
                    <input type="submit" class="submit-btn" value="Log in" data-i18n-value="loginSubmit">
                </form>
        
                <form id="register" class="input-group" novalidate>
                    <input type="text" class="input-field" placeholder="Supervisor" name="supervisor" required data-i18n-placeholder="supervisorPlaceholder">
                    <input type="text" class="input-field" placeholder="Applicant" name="applicant_name" required data-i18n-placeholder="applicantPlaceholder">
                    <input id="register-email" type="email" class="input-field" placeholder="Email" name="email" required data-i18n-placeholder="emailPlaceholder">
                    <span id="email-error" class="error-message"></span>
                    <input type="text" class="input-field" placeholder="User" name="username" required data-i18n-placeholder="userPlaceholder"> 
                    
                    <div class="password-wrapper">
                        <input id="register-password" type="password" class="input-field" placeholder="Password" name="password" required data-i18n-placeholder="passwordPlaceholder">
                        
                        <div id="password-hint" class="info-message">
                            <p data-i18n="password_error_title">Password must contain:</p>
                            <ul>
                                <li id="lowercase" class="invalid" data-i18n="password_rule_lowercase">At least one lowercase letter</li>
                                <li id="uppercase" class="invalid" data-i18n="password_rule_uppercase">At least one uppercase letter</li>
                                <li id="special" class="invalid" data-i18n="password_rule_special">At least one special character</li>
                                <li id="length" class="invalid" data-i18n="password_rule_length">At least 6 characters</li>
                            </ul>
                        </div>
                    </div>
                    <input id="register-password" type="password" class="input-field" placeholder="Password" name="password" required data-i18n-placeholder="confirmPasswordPlaceholder">  
                    <!-- <input type="password" id="reg-confirm-password" class="input-field" placeholder="确认密码 (Confirm Password)" required> -->
                    <input type="submit" class="submit-btn" value="Register" data-i18n-value="registerSubmit">
                </form>
            </div>
        <span class="sp sp-t"></span>
        <span class="sp sp-r"></span>
        <span class="sp sp-b"></span>
        <span class="sp sp-l"></span>
    </div>
</div>

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>

